<template>
<!-- 1.新建Login/index.vue；2.App里留好显示位置<router-view>; 3.路由引入样式style -->
  <div>
    <van-sticky>
      <van-nav-bar title="黑马头条 - 登录" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入正确手机号', pattern: /^1[3456789]\d{9}$/ }]"
      />
      <van-field
        v-model="user.code"
        type="text"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写万能验证码', pattern: /^\d{6}$/ }]"
      />
    <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" :loading="isLoading" :disabled="isLoading" loading-text="登录中...">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 因为想让前端的变量名，直接和后台的接口的参数名一致，这样直接可以把user对象发给后台即可
      user: {
        mobile: '13888888888',
        code: '246810'
      },
      isLoading: false // 控制登录按钮加载状态
    }
  },
  methods: {
    // onSubmit (value) {
    //   console.log(value)
    // }

    // async onSubmit (value) {
    //   const [err, res] = await loginAPI(value)
    //   if (err) alert('验证码错误')
    //   else console.log(res)
    // }

    // async onSubmit (value) {
    //   const [err] = await loginAPI(value)
    //   if (err) this.$Notify({ type: 'danger', message: '账号或密码登录错误' })
    //   else this.$Notify({ type: 'success', message: '登录成功' })
    // }

    // 优化-避免用户频繁点击登录：
    // async onSubmit (value) {
    //   this.loading = true
    //   const [err, res] = await loginAPI(value)
    // // console.log(res);
    //   if (err) this.$Notify({ type: 'danger', message: '账号或密码登录错误' })
    //   else this.$Notify({ type: 'success', message: '登录成功' })
    //   this.loading = false
    // }

    ...mapMutations('user', ['setRefreshToken', 'setToken']),
    async onSubmit (value) {
      this.loading = true
      const [err, res] = await loginAPI(value)
      this.loading = false
      if (err) return this.$Notify({ type: 'danger', message: '账号或密码登录错误' })
      else this.$Notify({ type: 'success', message: '登录成功' })

      // 保存到vuex
      const { refresh_token, token } = res.data.data
      this.setRefreshToken(refresh_token)
      this.setToken(token)
      // 最后：登录成功处, 设置js跳转到首页
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang='less'>
// 问题：加了scoped后，没办法影响到组件内部的标签
// 原因：此类名是vant组件的，而你要添加属性名才能选择
// 解决：/deep/深度穿透选中组件内部的标签名进行影响了[属性名]跑到选择器前面，就能选中属性名下的那个类名了
// 顶部导航-以及vant样式定制
// 第一种：全局样式表
//  /deep/ .van-nav-bar {
//   background-color: #007bff;
//   .van-nav-bar__title {
//     color: white;
//     font-size: 14px;
//   }
// }
</style>
